<!DOCTYPE html>
<h3> {{ct.numberUnlocked(ct.state.player)}}/{{ct.numberTotal()}} </h3>
<label>{{ 'ACHIEVEMENTS.HIDE_COMPLETE' | translate }}
   <input type="checkbox" ng-model="ct.state.player.options.hideAchievements">
</label>
<div class="row">
  <div ng-repeat="name in ct.visibleAchievements(ct.state.player)"
       class="col-xs-4">
    <div class="panel panel-default"
         ng-class="{'panel-success': ct.maxed(name, ct.state.player),
                    'panel-warning': ct.inProgress(name, ct.state.player)}">

      <div class="panel-heading">
        <h3 class="panel-title">
          {{ct.data.achievements[name].name}}
          <span ng-if="ct.maxLevel(name) > 1 ">{{ct.getLevel(name, ct.state.player)}}</span>
        </h3>
      </div>
      <div class="panel-body"> {{ct.data.achievements[name].description}}
        <div class="hidden_block"
             ng-show="ct.hasProgress(name) && !ct.maxed(name, ct.state.player)">
          <div class="progress">
            <span class="progressbar-font">
              <pretty value="ct.getProgress(name, 'achievements', ct.state.player)"></pretty>%
  	        </span>
            <div class="progress-bar"
                 role="progressbar"
                 aria-valuenow="{{ct.getProgress(name, 'achievements', ct.state.player)}}"
                 aria-valuemin="0"
                 aria-valuemax="100"
                 style="width: {{ct.getProgress(name, 'achievements', ct.state.player)}}%;">
            </div>
          </div>
          <pretty value="ct.getAmount(name, 'achievements', ct.state.player)"></pretty> /
          <pretty value="ct.getGoal(name, 'achievements', ct.state.player)"></pretty>
        </div>
      </div>
    </div>
  </div>
</div>
``
